<template>
  <div>
    <div
      class="t4_content"
      style="background-color: #033866; padding-bottom: 30px"
    >
      <div class="t4_w">
        <!-- 面包屑 -->
        <div class="t4_local">
          <span class="local-tag"
          ><img src="@/assets/images/sub_ts.png" alt=""
          /></span>
          <a href="/">首页</a> &gt;<span style="color: #fff">资源统计</span>
          <!-- &gt; -->
          <!-- <span style="color: #fff">开放统计</span> -->
        </div>
        <el-row>
          <el-col :span="24">
<!--            <div class="unitsOfStatistics">-->
              <el-row>
                <el-col :span="24">
                  <div class="unitsOfStatistics">
                    <OrgTitle title="用户访问量">
                      <template slot="content">
                        <dataDownload />
                      </template>
                    </OrgTitle>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="unitsOfStatistics">
                    <OrgTitle title="ip调用排行">
                      <template slot="content">
                        <dataInterfaceCall />
                      </template>
                    </OrgTitle>
                  </div>
                </el-col> -->
              </el-row>
<!--            </div>-->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="unitsOfStatistics">
              <OrgTitle title="请求方式调用量">
                <template slot="content">
                  <historyOfTheLineChartPlatform />
                </template>
              </OrgTitle>
            </div>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="unitsOfStatistics">
              <OrgTitle title="总流量变化趋势">
                <template slot="content">
                  <enrollmentTypeAnalysisEachrs />
                </template>
              </OrgTitle>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="unitsOfStatistics">
              <OrgTitle title="Gateway流量变化趋势">
                <template slot="content">
                  <ciyun />
                </template>
              </OrgTitle>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="unitsOfStatistics">
              <OrgTitle title="实时总流量">
                <template slot="content">
                  <dataRatingStatistics />
                </template>
              </OrgTitle>
            </div>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="24"
          ><div class="unitsOfStatistics">
            <OrgTitle title="API调用总量">
              <template slot="content">
                <dataRating />
              </template>
            </OrgTitle></div
          ></el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <div class="unitsOfStatistics">
              <OrgTitle title="被攻击服务排行">
                <template slot="content">
                  <municipalDepartmentData />
                </template>
              </OrgTitle>
            </div>
          </el-col> -->
          <el-col :span="12">
            <div class="unitsOfStatistics">
              <OrgTitle title="响应时长统计">
                <template slot="content">
                  <visitsChart />
                </template>
              </OrgTitle>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="unitsOfStatistics">
              <OrgTitle title="api调用列表图">
                <template slot="content">
                  <districtLevel />
                </template>
              </OrgTitle>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>
<script>
import { getIndex,titleBar } from "@/utils/httpUtils";
import OrgTitle from "./components/antCard/index.vue";
import historyOfTheLineChartPlatform from "./components/antCard/historyOfTheLineChartPlatform.vue";
import visitsChart from "./components/antCard/visitsChart.vue";
import enrollmentTypeAnalysisEachrs from "./components/antCard/enrollmentTypeAnalysisEachrs.vue";
import municipalDepartmentData from "./components/antCard/municipalDepartmentData.vue";
import ciyun from "./components/antCard/ciyun.vue";
import dataRatingStatistics from "./components/antCard/DataRatingStatistics.vue";
import dataDownload from "./components/antCard/DataDownload.vue";
import dataInterfaceCall from "./components/antCard/DataInterfaceCall.vue";
import districtLevel from "./components/antCard/DistrictLevel.vue";
import dataRating from "./components/antCard/DataRating.vue";
export default {
  name: "",
  components: {
    OrgTitle,
    historyOfTheLineChartPlatform,
    visitsChart,
    enrollmentTypeAnalysisEachrs,
    ciyun,
    municipalDepartmentData,
    dataRatingStatistics,
    dataDownload,
    dataInterfaceCall,
    districtLevel,
    dataRating,
  },
  mixins: [],
  props: {},
  data() {
    return {
      // statisticArray: [
      //   {
      //     titleName: "数据资源",
      //     Num: "",
      //   },
      //   {
      //     titleName: "共享机构",
      //     Num: "",
      //   },
      //   {
      //     titleName: "API服务资源",
      //     Num: "",
      //   },
      //   {
      //     titleName: "交换数据",
      //     Num: "",
      //   },
      // ],
      dataCount: "",
      institution: "",
      serverCount: "",
      exchangeNum: "",
    };
  },
  computed: {},
  watch: {},
  mounted() {
    // this.getList1();
  },
  methods: {
    SetFloat(num) {
      const Numtotal = String(num).replace(".", ",");
      return Numtotal;
    },
    // getList1() {
    //   titleBar().then((res) => {
    //     // console.log(res,888555555);
    //     // console.log(res, "123");
    //     this.dataCount = res.onlineApiNum;
    //     this.institution = res.sqlApiSum;
    //     this.serverCount = res.tableApiSum;
    //     this.exchangeNum = res.thirdApiSum;
    //
    //   });
    // },
  },
};
</script>
<style scoped>
.unitsOfStatistics {
  padding: 20px;
  background-color: #072947;
  border: 1px #188af1 solid;
  /* margin: 5px 10px; */
}
.list_ul {
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.list_ul .list_li {
  width: 20%;
  text-align: center;
}
.list_ul .list_li span {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.list_ul .list_li p {
  color: #198ef8;
  font-size: 18px;
  font-weight: bold;
  line-height: 35px;
  margin: 0;
  padding: 0;
}

</style>
